<div class="app-container">
  <div class="title">
    <div class="use-description">
      Tip：在使用项目生成的代码之前，需要先将<span class="tip">crud.ts</span>文件存入<span class="tip">src/app/utils/</span>目录下
      <span class="crud-code-text" (click)="clickViewCrudCode()">
        查看<span class="tip">crud.ts</span>代码
      </span>
    </div>
   代码生成器<span class="tip">(拖动左侧组件到中间区域生成代码)</span>
    <div class="code-btn">
      <button nz-button nzType="default" (click)="clickViewCode()">查看代码</button>
      <button nz-button nzType="default" (click)="clickViewTopSearchCode()">查看顶部搜索代码</button>
      <button nz-button nzType="default" (click)="setSwaggerCode()">设置Swagger</button>
      <button nz-button nzType="default" (click)="clearCode()">清空</button>
    </div>
  </div>
  <div class="wrapper-content">
    <div class="left-wrapper">
      <div class="component-list">
        <div class="component-item" *ngFor="let item of componentList" [attr.data-json]="object2Json(item)">
          {{item.name}}
        </div>
      </div>
    </div>
    <div class="center-wrapper">
      <div class="widget-list">
        <div [ngClass]="['widget-item', item.key === selectedComponent.key && item.name !== 'Row' ? 'widget-active' : '']" *ngFor="let item of widgetList; let i = index;" (click)="clickComponent(item, $event)">
          <div class="copy-remove-icon-out">
            <i class="copy-icon" nz-icon nzType="copy" (click)="clickCopy(i)"></i>
            <i class="remove-icon" nz-icon nzType="minus-circle" (click)="clickDelete(i)"></i>
          </div>
          <nz-form-item *ngIf="!['Row', 'Table', 'EChart'].includes(item.name)" nzAlign="middle">
            <nz-form-label *ngIf="item.required" nzRequired nzSpan="8">{{item.label}}</nz-form-label>
            <nz-form-label *ngIf="!item.required" nzSpan="8">{{item.label}}</nz-form-label>
            <nz-form-control nzSpan="16">
              <input *ngIf="item.name === 'Input'" type="text"
                     nz-input [nzSize]="item.size" [placeholder]="item.placeholder">
              <nz-cascader *ngIf="item.name === 'Cascader'"
                           [nzSize]="item.size"
                           [nzPlaceHolder]="item.placeholder"
                           [nzOptions]="item.options"
                           [nzExpandTrigger]="item.expandTrigger"
                           [nzShowArrow]="item.showArrow"
                           [nzAllowClear]="item.allowClear"
                           [nzShowSearch]="item.showSearch"
              ></nz-cascader>
              <nz-checkbox-group *ngIf="item.name === 'CheckboxGroup'"
                                 [(ngModel)]="item.options">
              </nz-checkbox-group>
              <nz-date-picker *ngIf="item.name === 'DatePicker' && !item.isRange"
                              [nzAllowClear]="item.allowClear"
                              [nzShowTime]="item.showTime"
                              [nzFormat]="item.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
                              [nzPlaceHolder]="item.placeholder">
              </nz-date-picker>
              <nz-range-picker *ngIf="item.name === 'DatePicker' && item.isRange"
                               [nzAllowClear]="item.allowClear"
                               [nzShowTime]="item.showTime"
                               [nzFormat]="item.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'">
              </nz-range-picker>
              <nz-input-number *ngIf="item.name === 'InputNumber'"
                                [nzPlaceHolder]="item.placeholder"
                                [nzSize]="item.size"
                                [nzMin]="item.min"
                                [nzMax]="item.max"></nz-input-number>
              <nz-radio-group *ngIf="item.name === 'RadioGroup'">
                <label nz-radio *ngFor="let e of item.options" [nzValue]="e.value">{{e.label}}</label>
              </nz-radio-group>
              <nz-select *ngIf="item.name === 'Select'" [nzPlaceHolder]="item.placeholder" [nzSize]="item.size"
                         class="w100"
                         [nzAllowClear]="item.allowClear" [nzShowArrow]="item.showArrow"
                         [nzShowSearch]="item.showSearch"
                         [nzMode]="item.mode"
                         [nzMaxTagCount]="item.maxTagCount">
                <nz-option *ngFor="let e of item.options" [nzLabel]="e.label" [nzValue]="e.value"></nz-option>
              </nz-select>
              <nz-switch *ngIf="item.name === 'Switch'" [nzCheckedChildren]="item.checkedChildren"
                         [nzUnCheckedChildren]="item.unCheckedChildren"
                         [nzSize]="item.size">
              </nz-switch>
              <nz-time-picker *ngIf="item.name === 'TimePicker'"
                          [nzPlaceHolder]="item.placeholder"
                          [nzFormat]="timePickerFormat(item)"
                          [nzHourStep]="item.hourStep"
                          [nzMinuteStep]="item.minuteStep"
                          [nzSecondStep]="item.secondStep"
              ></nz-time-picker>
              <nz-tree-select *ngIf="item.name === 'TreeSelect'"
                          class="w100"
                          [nzPlaceHolder]="item.placeholder"
                          [nzSize]="item.size"
                          [nzCheckable]="item.checkable"
                          [nzAllowClear]="item.allowClear"
                          [nzShowSearch]="item.showSearch"
                          [nzMaxTagCount]="item.maxTagCount"
                          [nzNodes]="item.options"
              >
              </nz-tree-select>
              <nz-upload *ngIf="item.name === 'Upload'"
                [nzListType]="item.listType"
              >
                <i nz-icon nzType="plus"></i>
              </nz-upload>
            </nz-form-control>
          </nz-form-item>
          <div class="table-box" *ngIf="item.name === 'Table'">
            <nz-table
              nzBordered
              [nzData]="item.dataList"
            >
              <thead>
                <tr>
                  <th *ngIf="item.hasChecked" class="tableCheck" nzShowCheckbox></th>
                  <th *ngIf="item.hasIndex">序号</th>
                  <th *ngFor="let item of item.columns"
                      [nzShowSort]="item.isSort"
                      [nzShowFilter]="item.showFilter"
                      [nzCustomFilter]="item.customFilter"
                  >
                    <nz-dropdown *ngIf="item.customFilter" nzTrigger="click" nzPlacement="bottomRight" [nzClickHide]="false" nzTableFilter #dropdown>
                      <i nz-icon nzType="search" class="ant-table-filter-icon"
                         [class.ant-table-filter-open]="dropdown.nzVisible"
                         nz-dropdown></i>
                      <div class="search-box" style="width: 150px">
                        <input type="text" nz-input placeholder="请输入" [(ngModel)]="item.field"/>
                        <button nz-button nzSize="small" nzType="primary" class="search-button">
                          搜索
                        </button>
                        <button nz-button nzSize="small">重置</button>
                      </div>
                    </nz-dropdown>
                    {{item.title}}
                  </th>
                  <th *ngIf="item.hasOperate">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of item.dataList; let i = index;"></tr>
              </tbody>
            </nz-table>
          </div>
          <div class="chart-box" *ngIf="item.name === 'EChart'">
            <div class="chart-comp"></div>
          </div>
          <!--子元素区域 start-->
          <div *ngIf="item.name === 'Row'"
               [nzAlign]="item.align"
               [nzJustify]="item.justify"
               [attr.data-nanoid]="item.nanoid"
               nz-row class="widget-row">
            <div nz-col [nzSpan]="24 / item.children.length" [ngClass]="['child-item', ele.key === selectedComponent.key ? 'child-active' : '']" *ngFor="let ele of item.children; let k = index;" (click)="clickComponent(ele, $event)">
              <div class="copy-remove-icon">
                <i class="copy-icon" nz-icon nzType="copy" (click)="clickSubCopy(i, k)"></i>
                <i class="remove-icon" nz-icon nzType="minus-circle" (click)="clickSubDelete(i, k)"></i>
              </div>
              <nz-form-item nzAlign="middle">
                <nz-form-label *ngIf="ele.required" nzRequired nzSpan="8">{{ele.label}}</nz-form-label>
                <nz-form-label *ngIf="!ele.required" nzSpan="8">{{ele.label}}</nz-form-label>
                <nz-form-control nzSpan="16">
                  <input *ngIf="ele.name === 'Input'" type="text" nz-input [nzSize]="ele.size" [placeholder]="ele.placeholder">
                  <nz-cascader *ngIf="ele.name === 'Cascader'"
                               [nzSize]="ele.size"
                               [nzPlaceHolder]="ele.placeholder"
                               [nzOptions]="ele.options"
                               [nzExpandTrigger]="ele.expandTrigger"
                               [nzShowArrow]="ele.showArrow"
                               [nzAllowClear]="ele.allowClear"
                               [nzShowSearch]="ele.showSearch"
                  ></nz-cascader>
                  <nz-checkbox-group *ngIf="ele.name === 'CheckboxGroup'"
                                     [(ngModel)]="ele.options">
                  </nz-checkbox-group>
                  <nz-date-picker *ngIf="ele.name === 'DatePicker' && !ele.isRange"
                                  [nzAllowClear]="ele.allowClear"
                                  [nzShowTime]="ele.showTime"
                                  [nzFormat]="item.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
                                  [nzPlaceHolder]="ele.placeholder">
                  </nz-date-picker>
                  <nz-range-picker *ngIf="ele.name === 'DatePicker' && ele.isRange"
                                   [nzAllowClear]="ele.allowClear"
                                   [nzShowTime]="ele.showTime"
                                   [nzFormat]="ele.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'">
                  </nz-range-picker>
                  <nz-input-number *ngIf="ele.name === 'InputNumber'"
                                   [nzPlaceHolder]="ele.placeholder"
                                   [nzSize]="ele.size"
                                   [nzMin]="ele.min"
                                   [nzMax]="ele.max"></nz-input-number>
                  <nz-radio-group *ngIf="ele.name === 'RadioGroup'">
                    <label nz-radio *ngFor="let e of ele.options" [nzValue]="e.value">{{e.label}}</label>
                  </nz-radio-group>
                  <nz-select *ngIf="ele.name === 'Select'" [nzPlaceHolder]="ele.placeholder" [nzSize]="ele.size"
                             class="w100"
                             [nzAllowClear]="ele.allowClear" [nzShowArrow]="ele.showArrow" [nzShowSearch]="ele.showSearch"
                             [nzMode]="ele.mode"
                             [nzMaxTagCount]="ele.maxTagCount">
                    <nz-option *ngFor="let e of ele.options" [nzLabel]="e.label" [nzValue]="e.value"></nz-option>
                  </nz-select>
                  <nz-switch *ngIf="item.name === 'Switch'" [nzCheckedChildren]="item.checkedChildren"
                             [nzUnCheckedChildren]="item.unCheckedChildren"
                             [nzSize]="item.size">
                  </nz-switch>
                  <nz-time-picker *ngIf="ele.name === 'TimePicker'"
                            [nzPlaceHolder]="ele.placeholder"
                            [nzFormat]="timePickerFormat(ele)"
                            [nzHourStep]="item.hourStep"
                            [nzMinuteStep]="item.minuteStep"
                            [nzSecondStep]="item.secondStep"
                  ></nz-time-picker>
                  <nz-tree-select *ngIf="ele.name === 'TreeSelect'"
                                  class="w100"
                            [nzPlaceHolder]="ele.placeholder"
                            [nzSize]="ele.size"
                            [nzCheckable]="ele.checkable"
                            [nzAllowClear]="ele.allowClear"
                            [nzShowSearch]="ele.showSearch"
                            [nzMaxTagCount]="ele.maxTagCount"
                            [nzNodes]="ele.options"
                  >
                  </nz-tree-select>
                  <nz-upload *ngIf="ele.name === 'Upload'"
                             [nzListType]="ele.listType"
                  >
                    <i nz-icon nzType="plus"></i>
                  </nz-upload>
                </nz-form-control>
              </nz-form-item>
            </div>
          </div>
          <!--子元素区域 end-->
        </div>
      </div>
    </div>
    <div class="right-wrapper">
      <div class="form-item" *ngIf="selectedComponent.name === 'Row'">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            align
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.align">
              <nz-option *ngFor="let item of selectedComponent.alignList" [nzValue]="item" [nzLabel]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="selectedComponent.name === 'Row'">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            justify
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.justify">
              <nz-option *ngFor="let item of selectedComponent.justifyList" [nzValue]="item" [nzLabel]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="selectedComponent.name === 'Row'">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            position
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.position">
              <nz-option *ngFor="let item of selectedComponent.positionList" [nzValue]="item" [nzLabel]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="selectedComponent.name === 'Row'">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            显示导出按钮
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.showExportBtn"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="!['Row', 'Table', 'EChart'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">label</nz-form-label>
          <nz-form-control nzSpan="16">
            <input type="text" nz-input [(ngModel)]="selectedComponent.label">
          </nz-form-control>
        </nz-form-item>
      </div>
      <nz-form-item>
        <nz-form-label nzSpan="8">字段</nz-form-label>
        <nz-form-control nzSpan="16">
          <input type="text" nz-input [(ngModel)]="selectedComponent.field">
        </nz-form-control>
      </nz-form-item>
      <div class="form-item" *ngIf="['Input', 'Cascader', 'DatePicker', 'InputNumber', 'Select', 'TimePicker', 'TreeSelect'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">placeholder</nz-form-label>
          <nz-form-control nzSpan="16">
            <input type="text" nz-input [(ngModel)]="selectedComponent.placeholder">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="!['Row', 'Table', 'EChart'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            必填
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.required"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Input', 'Cascader', 'InputNumber', 'Select', 'Switch', 'TreeSelect'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            大小
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.size">
              <nz-option *ngFor="let item of selectedComponent.sizeList" [nzValue]="item" [nzLabel]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['InputNumber'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            min
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-input-number [(ngModel)]="selectedComponent.min"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['InputNumber'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            max
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-input-number [(ngModel)]="selectedComponent.max"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Switch'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            选中时的内容
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <input type="text" nz-input [(ngModel)]="selectedComponent.checkedChildren">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Switch'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            非选中时的内容
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <input type="text" nz-input [(ngModel)]="selectedComponent.unCheckedChildren">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Cascader', 'DatePicker', 'Select', 'TreeSelect'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            允许清空
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.allowClear"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Cascader', 'Select'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            显示箭头
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.showArrow"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Cascader', 'Select', 'TreeSelect'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            是否搜索
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.showSearch"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['DatePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            显示时间选择
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.showTime"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['TimePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            时分秒
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.showSeconds"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['TimePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            小时选项间隔
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-input-number [(ngModel)]="selectedComponent.hourStep"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['TimePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            分钟选项间隔
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-input-number [(ngModel)]="selectedComponent.minuteStep"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['TimePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            秒选项间隔
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-input-number [(ngModel)]="selectedComponent.secondStep"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['DatePicker'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            范围选择
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.isRange"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Select'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            模式
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.mode">
              <nz-option *ngFor="let item of selectedComponent.modeList" [nzLabel]="item" [nzValue]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['TreeSelect'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            是否多选
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.checkable"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Upload'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            内建样式
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.listType">
              <nz-option *ngFor="let item of selectedComponent.listTypeList" [nzValue]="item" [nzLabel]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Upload'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            模块名称
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <input type="text" nz-input [(ngModel)]="selectedComponent.moduleName">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Upload'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            接收文件类型
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.accept" nzMode="tags" nzMaxTagCount="5">
              <nz-option *ngFor="let item of selectedComponent.acceptFileList" [nzLabel]="item" [nzValue]="item"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="(['Select'].includes(selectedComponent.name) && selectedComponent.mode !== 'default') ||
  (['TreeSelect'].includes(selectedComponent.name) && selectedComponent.checkable)
">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            显示几个
          </nz-form-label>
          <nz-form-control nzSpan="16">
           <nz-input-number [(ngModel)]="selectedComponent.maxTagCount"></nz-input-number>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Cascader'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            展开方式
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-select class="w100" [(ngModel)]="selectedComponent.expandTrigger">
              <nz-option nzLabel="click" nzValue="click"></nz-option>
              <nz-option nzLabel="hover" nzValue="hover"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['CheckboxGroup', 'RadioGroup', 'Select'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">选项</nz-form-label>
          <nz-form-control nzSpan="16">
            <div class="option-list">
              <div class="option-item" *ngFor="let item of selectedComponent.options; let i = index;">
                {{item.label}}
                <i class="icon-remove" nz-icon nzType="close" (click)="removeOption(i)"></i>
              </div>
            </div>
            <i class="icon-plus" nz-icon nzType="plus" nz-popconfirm
               (nzOnCancel)="optionName = ''"
               (nzOnConfirm)="confirmAddOption()"
               [nzTitle]="optionTemp"></i>
            <ng-template #optionTemp>
              <input type="text" nz-input [(ngModel)]="optionName">
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Table'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            多选框
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.hasChecked"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Table'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            序号列
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.hasIndex"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Table'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            操作列
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <nz-switch [(ngModel)]="selectedComponent.hasOperate"></nz-switch>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="form-item" *ngIf="['Table'].includes(selectedComponent.name)">
        <nz-form-item>
          <nz-form-label nzSpan="8">
            字段配置
          </nz-form-label>
          <nz-form-control nzSpan="16">
            <button nz-button nzType="primary" (click)="clickConfigField()">点击配置</button>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div class="chart-item" *ngIf="selectedComponent.name === 'EChart'">
        <div class="form-item">
          <nz-form-item>
            <nz-form-label nzSpan="8">
              图表名称
            </nz-form-label>
            <nz-form-control nzSpan="16">
              <nz-select class="w100" [(ngModel)]="selectedComponent.chartName" nzShowSearch (ngModelChange)="changeEChartType('chart-name')">
                <nz-option [nzCustomContent]="true" *ngFor="let item of selectedComponent.chartNameList"
                           [nzValue]="item" [nzLabel]="item">
                  <div class="type-item"
                       nz-popover [nzContent]="previewTypeImgTemp" nzPlacement="leftTop"
                  >
                    <img class="abbr-img" [src]="'assets/img/' + item + '.jpg'" alt="">
                    <div class="type-name">{{item}}</div>
                    <ng-template #previewTypeImgTemp>
                      <img [src]="'assets/img/' + item + '.jpg'" alt="">
                    </ng-template>
                  </div>
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div class="form-item">
          <nz-form-item>
            <nz-form-label nzSpan="8">背景色</nz-form-label>
            <nz-form-control nzSpan="16">
              <input type="color" [(ngModel)]="selectedComponent.backgroundColor" (ngModelChange)="changeEChartType('background-color')">
            </nz-form-control>
          </nz-form-item>
        </div>
        <ng-template #legendHValueTemp>
          <i nz-icon nzType="question-circle" nz-tooltip nzTitle="值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'"></i>
        </ng-template>
        <ng-template #legendVValueTemp>
          <i nz-icon nzType="question-circle" nz-tooltip nzTitle="值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'"></i>
        </ng-template>
        <nz-collapse>
          <nz-collapse-panel nzHeader="图例">
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">图例</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-switch [(ngModel)]="selectedComponent.legend.show"
                             (ngModelChange)="changeEChartType('legend')"
                             nzCheckedChildren="显示图例" nzUnCheckedChildren="隐藏图例"></nz-switch>
                </nz-form-control>
              </nz-form-item>
              <div *ngIf="selectedComponent.legend.show">
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">类型</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-select [(ngModel)]="selectedComponent.legend.type" (ngModelChange)="changeEChartType('legend')">
                        <nz-option *ngFor="let item of selectedComponent.legendTypeList" [nzLabel]="item" [nzValue]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">left</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendHValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.legend.left" (ngModelChange)="changeEChartType('legend')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">right</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendHValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.legend.right" (ngModelChange)="changeEChartType('legend')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">top</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendVValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.legend.top" (ngModelChange)="changeEChartType('legend')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">bottom</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendVValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.legend.bottom" (ngModelChange)="changeEChartType('legend')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">布局朝向</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-select [(ngModel)]="selectedComponent.legend.orient" (ngModelChange)="changeEChartType('legend')">
                        <nz-option *ngFor="let item of selectedComponent.orientList" [nzLabel]="item" [nzValue]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">内边距</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.legend.padding" [nzMin]="0" (ngModelChange)="changeEChartType('legend')"></nz-input-number>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">间隔</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.legend.itemGap" [nzMin]="0" (ngModelChange)="changeEChartType('legend')"></nz-input-number>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="标题">
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">标题</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-switch [(ngModel)]="selectedComponent.title.show"
                             (ngModelChange)="changeEChartType('title')"
                             nzCheckedChildren="显示标题" nzUnCheckedChildren="隐藏标题"></nz-switch>
                </nz-form-control>
              </nz-form-item>
              <div *ngIf="selectedComponent.title.show">
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">标题文本</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <textarea nz-input [(ngModel)]="selectedComponent.title.text" (ngModelChange)="changeEChartType('title')"></textarea>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">标题颜色</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <input type="color" [(ngModel)]="selectedComponent.title.textStyle.color" (ngModelChange)="changeEChartType('title')">
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">标题大小</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <div class="form-item-row">
                        <nz-slider class="w120" [nzMin]="12" [(ngModel)]="selectedComponent.title.textStyle.fontSize" (ngModelChange)="changeEChartType('title')"></nz-slider>
                        <nz-input-number [nzMin]="12" [(ngModel)]="selectedComponent.title.textStyle.fontSize" (ngModelChange)="changeEChartType('title')"></nz-input-number>
                      </div>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">left</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <div class="form-item-row">
                        <nz-select [(ngModel)]="selectedComponent.title.left" (ngModelChange)="changeEChartType('title')">
                          <nz-option *ngFor="let item of selectedComponent.horizontalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </div>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">内边距</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <div class="form-item-row">
                        <nz-input-number [(ngModel)]="selectedComponent.title.padding" [nzMin]="0" (ngModelChange)="changeEChartType('title')"></nz-input-number>
                      </div>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">主副标题的间距</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <div class="form-item-row">
                        <nz-input-number [(ngModel)]="selectedComponent.title.itemGap" [nzMin]="0" (ngModelChange)="changeEChartType('title')"></nz-input-number>
                      </div>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">副标题文本</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <textarea nz-input [(ngModel)]="selectedComponent.title.subtext" (ngModelChange)="changeEChartType('title')"></textarea>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item" *ngIf="selectedComponent.title.subtextStyle">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">副标题颜色</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <input type="color" [(ngModel)]="selectedComponent.title.subtextStyle.color" (ngModelChange)="changeEChartType('title')">
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item" *ngIf="selectedComponent.title.subtextStyle">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">副标题大小</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <div class="form-item-row">
                        <nz-slider class="w120" [nzMin]="12" [(ngModel)]="selectedComponent.title.subtextStyle.fontSize" (ngModelChange)="changeEChartType('title')"></nz-slider>
                        <nz-input-number [nzMin]="12" [(ngModel)]="selectedComponent.title.subtextStyle.fontSize" (ngModelChange)="changeEChartType('title')"></nz-input-number>
                      </div>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="Grid">
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">grid</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-switch [(ngModel)]="selectedComponent.grid.show"
                             (ngModelChange)="changeEChartType('grid')"
                             nzCheckedChildren="显示grid" nzUnCheckedChildren="隐藏grid"></nz-switch>
                </nz-form-control>
              </nz-form-item>
              <div *ngIf="selectedComponent.grid.show">
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">grid-top</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.grid.top" (ngModelChange)="changeEChartType('grid')"></nz-input-number>
                      <nz-select class="w60" [(ngModel)]="selectedComponent.gridTUnit" (ngModelChange)="changeEChartType('grid')">
                        <nz-option *ngFor="let item of selectedComponent.gridUnitList" [nzValue]="item" [nzLabel]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">grid-left</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.grid.left" (ngModelChange)="changeEChartType('grid')"></nz-input-number>
                      <nz-select class="w60" [(ngModel)]="selectedComponent.gridLUnit" (ngModelChange)="changeEChartType('grid')">
                        <nz-option *ngFor="let item of selectedComponent.gridUnitList" [nzValue]="item" [nzLabel]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">grid-right</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.grid.right" (ngModelChange)="changeEChartType('grid')"></nz-input-number>
                      <nz-select class="w60" [(ngModel)]="selectedComponent.gridRUnit" (ngModelChange)="changeEChartType('grid')">
                        <nz-option *ngFor="let item of selectedComponent.gridUnitList" [nzValue]="item" [nzLabel]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">grid-bottom</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.grid.bottom" (ngModelChange)="changeEChartType('grid')"></nz-input-number>
                      <nz-select class="w60" [(ngModel)]="selectedComponent.gridBUnit" (ngModelChange)="changeEChartType('grid')">
                        <nz-option *ngFor="let item of selectedComponent.gridUnitList" [nzValue]="item" [nzLabel]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="工具栏">
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">工具栏</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-switch [(ngModel)]="selectedComponent.toolbox.show"
                             (ngModelChange)="changeEChartType('toolbox')"
                             nzCheckedChildren="显示工具栏" nzUnCheckedChildren="隐藏工具栏"></nz-switch>
                </nz-form-control>
              </nz-form-item>
              <div *ngIf="selectedComponent.toolbox.show">
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">布局朝向</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-select class="w100" [(ngModel)]="selectedComponent.toolbox.orient" (ngModelChange)="changeEChartType('toolbox')">
                        <nz-option *ngFor="let item of selectedComponent.orientList" [nzLabel]="item" [nzValue]="item"></nz-option>
                      </nz-select>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">大小</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.toolbox.itemSize" [nzMin]="15" (ngModelChange)="changeEChartType('toolbox')"></nz-input-number>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">间距</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-number [(ngModel)]="selectedComponent.toolbox.itemGap" [nzMin]="8" (ngModelChange)="changeEChartType('toolbox')"></nz-input-number>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">left</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendHValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.toolbox.left" (ngModelChange)="changeEChartType('toolbox')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">right</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendHValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.toolbox.right" (ngModelChange)="changeEChartType('toolbox')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">top</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendVValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.toolbox.top" (ngModelChange)="changeEChartType('toolbox')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">bottom</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-input-group [nzAddOnAfter]="legendVValueTemp">
                        <input type="text" nz-input [(ngModel)]="selectedComponent.toolbox.bottom" (ngModelChange)="changeEChartType('toolbox')">
                      </nz-input-group>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">保存为图片</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-switch [(ngModel)]="selectedComponent.toolbox.feature.saveAsImage.show"
                                 (ngModelChange)="changeEChartType('toolbox')"
                                 nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"></nz-switch>
                    </nz-form-control>
                  </nz-form-item>
                  <div *ngIf="selectedComponent.toolbox.feature.saveAsImage.show">
                    <div class="form-item">
                      <nz-form-item>
                        <nz-form-label nzSpan="8">类型</nz-form-label>
                        <nz-form-control nzSpan="16">
                          <nz-select [(ngModel)]="selectedComponent.toolbox.feature.saveAsImage.type" (ngModelChange)="changeEChartType('toolbox')">
                            <nz-option *ngFor="let item of selectedComponent.imageTypeList" [nzLabel]="item" [nzValue]="item"></nz-option>
                          </nz-select>
                        </nz-form-control>
                      </nz-form-item>
                    </div>
                    <div class="form-item">
                      <nz-form-item>
                        <nz-form-label nzSpan="8">图片名称</nz-form-label>
                        <nz-form-control nzSpan="16">
                          <input type="text" nz-input [(ngModel)]="selectedComponent.toolbox.feature.saveAsImage.name" (ngModelChange)="changeEChartType('toolbox')">
                        </nz-form-control>
                      </nz-form-item>
                    </div>
                    <div class="form-item">
                      <nz-form-item>
                        <nz-form-label nzSpan="8">配置项还原</nz-form-label>
                        <nz-form-control nzSpan="16">
                          <nz-switch [(ngModel)]="selectedComponent.toolbox.feature.restore.show"
                                       (ngModelChange)="changeEChartType('toolbox')"
                                       nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"></nz-switch>
                        </nz-form-control>
                      </nz-form-item>
                    </div>
                    <div class="form-item">
                      <nz-form-item>
                        <nz-form-label nzSpan="8">数据视图</nz-form-label>
                        <nz-form-control nzSpan="16">
                          <nz-switch [(ngModel)]="selectedComponent.toolbox.feature.dataView.show"
                                     (ngModelChange)="changeEChartType('toolbox')"
                                     nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"></nz-switch>
                        </nz-form-control>
                      </nz-form-item>
                    </div>
                    <div class="form-item">
                      <nz-form-item>
                        <nz-form-label nzSpan="8">区域缩放</nz-form-label>
                        <nz-form-control nzSpan="16">
                          <nz-switch [(ngModel)]="selectedComponent.toolbox.feature.dataZoom.show"
                                     (ngModelChange)="changeEChartType('toolbox')"
                                     nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"></nz-switch>
                        </nz-form-control>
                      </nz-form-item>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="X轴">
            <div class="collapse-content">
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">位置</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.position" (ngModelChange)="changeEChartType('x-axis')">
                      <nz-option *ngFor="let item of selectedComponent.positionXList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">偏移量</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.xAxis.offset" [nzMin]="0" (ngModelChange)="changeEChartType('x-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <input type="text" nz-input [(ngModel)]="selectedComponent.xAxis.name" (ngModelChange)="changeEChartType('x-axis')">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称显示位置</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.nameLocation" (ngModelChange)="changeEChartType('x-axis')">
                      <nz-option *ngFor="let item of selectedComponent.nameLocationList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">颜色</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <input type="color" [(ngModel)]="selectedComponent.xAxis.nameTextStyle.color" (ngModelChange)="changeEChartType('x-axis')">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">字体风格</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.nameTextStyle.fontStyle" (ngModelChange)="changeEChartType('x-axis')">
                      <nz-option *ngFor="let item of selectedComponent.fontStyleList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">粗细</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.xAxis.nameTextStyle.fontWeight" [nzMin]="100" [nzMax]="900" [nzStep]="100" (ngModelChange)="changeEChartType('x-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">字体大小</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.xAxis.nameTextStyle.fontSize" [nzMin]="12" (ngModelChange)="changeEChartType('x-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">文字水平对齐</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.nameTextStyle.align" (ngModelChange)="changeEChartType('x-axis')">
                      <nz-option *ngFor="let item of selectedComponent.horizontalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">文字垂直对齐</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.nameTextStyle.verticalAlign" (ngModelChange)="changeEChartType('x-axis')">
                      <nz-option *ngFor="let item of selectedComponent.verticalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称轴线间距</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.xAxis.nameGap" [nzMin]="0" (ngModelChange)="changeEChartType('x-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称旋转</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.xAxis.nameRotate" [nzMin]="-90" [nzMax]="90" (ngModelChange)="changeEChartType('x-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">反向</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-switch [(ngModel)]="selectedComponent.xAxis.inverse" nzCheckedChildren="开启反向" nzUnCheckedChildren="关闭反向" (ngModelChange)="changeEChartType('x-axis')"></nz-switch>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <div class="title-type">
                  X轴线
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">x轴轴线</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-switch [(ngModel)]="selectedComponent.xAxis.axisLine.show"
                                 (ngModelChange)="changeEChartType('x-axis-line')"
                                 nzCheckedChildren="显示X轴线" nzUnCheckedChildren="隐藏X轴线"></nz-switch>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div *ngIf="selectedComponent.xAxis.axisLine.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">颜色</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <input type="color" [(ngModel)]="selectedComponent.xAxis.axisLine.lineStyle.color" (ngModelChange)="changeEChartType('x-axis-line')">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">类型</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select [(ngModel)]="selectedComponent.xAxis.axisLine.lineStyle.type" (ngModelChange)="changeEChartType('x-axis-line')">
                          <nz-option *ngFor="let item of selectedComponent.axisTypeList" [nzValue]="item" [nzLabel]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
                <div class="title-type">
                  X刻度
                </div>
                <div *ngIf="selectedComponent.xAxis.axisLine.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">x轴刻度线</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.xAxis.axisTick.show"
                                   (ngModelChange)="changeEChartType('x-axis-tick')"
                                   nzCheckedChildren="显示X轴刻度线" nzUnCheckedChildren="隐藏X轴刻度线"></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                    <div *ngIf="selectedComponent.xAxis.axisTick.show">
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">朝向</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-switch [(ngModel)]="selectedComponent.xAxis.axisTick.inside"
                                       (ngModelChange)="changeEChartType('x-axis-tick')"
                                       nzCheckedChildren="朝内" nzUnCheckedChildren="朝外"></nz-switch>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">间隔</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.axisTick.interval"  (ngModelChange)="changeEChartType('x-axis-tick')">
                              <nz-option [nzValue]="0" nzLabel="显示全部标签"></nz-option>
                              <nz-option nzValue="auto" nzLabel="auto"></nz-option>
                            </nz-select>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">标签刻度对齐</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-switch [(ngModel)]="selectedComponent.xAxis.axisTick.alignWithLabel"
                                       (ngModelChange)="changeEChartType('x-axis-tick')"
                                       nzCheckedChildren="对齐" nzUnCheckedChildren="不对齐"></nz-switch>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">颜色</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <input type="color" [(ngModel)]="selectedComponent.xAxis.axisTick.lineStyle.color" (ngModelChange)="changeEChartType('x-axis-tick')">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">类型</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-select [(ngModel)]="selectedComponent.xAxis.axisTick.lineStyle.type" (ngModelChange)="changeEChartType('x-axis-tick')">
                              <nz-option *ngFor="let item of selectedComponent.axisTypeList" [nzValue]="item" [nzLabel]="item"></nz-option>
                            </nz-select>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="title-type">
                  X标签
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">x轴标签</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-switch [(ngModel)]="selectedComponent.xAxis.axisLabel.show"
                                 (ngModelChange)="changeEChartType('x-axis-label')"
                                 nzCheckedChildren="显示X轴标签" nzUnCheckedChildren="隐藏X轴标签"></nz-switch>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div *ngIf="selectedComponent.xAxis.axisLabel.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">朝向</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.xAxis.axisLabel.inside"
                                   (ngModelChange)="changeEChartType('x-axis-label')"
                                   nzCheckedChildren="朝内" nzUnCheckedChildren="朝外"></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">间隔</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.axisLabel.interval"  (ngModelChange)="changeEChartType('x-axis-label')">
                          <nz-option [nzValue]="0" nzLabel="显示全部标签"></nz-option>
                          <nz-option nzValue="auto" nzLabel="auto"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">旋转</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.xAxis.axisLabel.rotate" (ngModelChange)="changeEChartType('x-axis-label')" [nzMin]="-90" [nzMax]="90"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">margin</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.xAxis.axisLabel.margin" (ngModelChange)="changeEChartType('x-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">颜色</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <input type="color" [(ngModel)]="selectedComponent.xAxis.axisLabel.color" (ngModelChange)="changeEChartType('x-axis-label')">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体风格</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.axisLabel.fontStyle" (ngModelChange)="changeEChartType('x-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.fontStyleList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体粗细</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.xAxis.axisLabel.fontWeight" [nzMin]="100" [nzMax]="900" [nzStep]="100" (ngModelChange)="changeEChartType('x-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体大小</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.xAxis.axisLabel.fontSize" [nzMin]="12" (ngModelChange)="changeEChartType('x-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">文字水平对齐</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.axisLabel.align" (ngModelChange)="changeEChartType('x-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.horizontalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">文字垂直对齐</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.xAxis.axisLabel.verticalAlign" (ngModelChange)="changeEChartType('x-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.verticalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">坐标分隔线</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.xAxis.splitLine.show" (ngModelChange)="changeEChartType('x-axis-split-line')"
                                   nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"
                        ></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="Y轴">
            <div class="collapse-content">
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">位置</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.position" (ngModelChange)="changeEChartType('y-axis')">
                      <nz-option *ngFor="let item of selectedComponent.positionYList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">偏移量</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.yAxis.offset" [nzMin]="0" (ngModelChange)="changeEChartType('y-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <input type="text" nz-input [(ngModel)]="selectedComponent.yAxis.name" (ngModelChange)="changeEChartType('y-axis')">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称显示位置</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.nameLocation" (ngModelChange)="changeEChartType('y-axis')">
                      <nz-option *ngFor="let item of selectedComponent.nameLocationList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">颜色</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <input type="color" [(ngModel)]="selectedComponent.yAxis.nameTextStyle.color" (ngModelChange)="changeEChartType('y-axis')">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">字体风格</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.nameTextStyle.fontStyle" (ngModelChange)="changeEChartType('y-axis')">
                      <nz-option *ngFor="let item of selectedComponent.fontStyleList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">粗细</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.yAxis.nameTextStyle.fontWeight" [nzMin]="100" [nzMax]="900" [nzStep]="100" (ngModelChange)="changeEChartType('y-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">字体大小</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.yAxis.nameTextStyle.fontSize" [nzMin]="12" (ngModelChange)="changeEChartType('y-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">文字水平对齐</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.nameTextStyle.align" (ngModelChange)="changeEChartType('y-axis')">
                      <nz-option *ngFor="let item of selectedComponent.horizontalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">文字垂直对齐</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.nameTextStyle.verticalAlign" (ngModelChange)="changeEChartType('y-axis')">
                      <nz-option *ngFor="let item of selectedComponent.verticalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称轴线间距</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.yAxis.nameGap" [nzMin]="0" (ngModelChange)="changeEChartType('y-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">名称旋转</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-input-number [(ngModel)]="selectedComponent.yAxis.nameRotate" [nzMin]="-90" [nzMax]="90" (ngModelChange)="changeEChartType('y-axis')"></nz-input-number>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <nz-form-item>
                  <nz-form-label nzSpan="8">反向</nz-form-label>
                  <nz-form-control nzSpan="16">
                    <nz-switch [(ngModel)]="selectedComponent.yAxis.inverse" nzCheckedChildren="开启反向" nzUnCheckedChildren="关闭反向" (ngModelChange)="changeEChartType('y-axis')"></nz-switch>
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div class="form-item">
                <div class="title-type">
                  Y轴线
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">x轴轴线</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-switch [(ngModel)]="selectedComponent.yAxis.axisLine.show"
                                 (ngModelChange)="changeEChartType('y-axis-line')"
                                 nzCheckedChildren="显示X轴线" nzUnCheckedChildren="隐藏X轴线"></nz-switch>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div *ngIf="selectedComponent.yAxis.axisLine.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">颜色</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <input type="color" [(ngModel)]="selectedComponent.yAxis.axisLine.lineStyle.color" (ngModelChange)="changeEChartType('y-axis-line')">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">类型</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select [(ngModel)]="selectedComponent.yAxis.axisLine.lineStyle.type" (ngModelChange)="changeEChartType('y-axis-line')">
                          <nz-option *ngFor="let item of selectedComponent.axisTypeList" [nzValue]="item" [nzLabel]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
                <div class="title-type">
                  Y刻度
                </div>
                <div *ngIf="selectedComponent.yAxis.axisLine.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">x轴刻度线</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.yAxis.axisTick.show"
                                   (ngModelChange)="changeEChartType('y-axis-tick')"
                                   nzCheckedChildren="显示X轴刻度线" nzUnCheckedChildren="隐藏X轴刻度线"></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                    <div *ngIf="selectedComponent.yAxis.axisTick.show">
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">朝向</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-switch [(ngModel)]="selectedComponent.yAxis.axisTick.inside"
                                       (ngModelChange)="changeEChartType('y-axis-tick')"
                                       nzCheckedChildren="朝内" nzUnCheckedChildren="朝外"></nz-switch>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">间隔</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.axisTick.interval"  (ngModelChange)="changeEChartType('y-axis-tick')">
                              <nz-option [nzValue]="0" nzLabel="显示全部标签"></nz-option>
                              <nz-option nzValue="auto" nzLabel="auto"></nz-option>
                            </nz-select>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">标签刻度对齐</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-switch [(ngModel)]="selectedComponent.yAxis.axisTick.alignWithLabel"
                                       (ngModelChange)="changeEChartType('y-axis-tick')"
                                       nzCheckedChildren="对齐" nzUnCheckedChildren="不对齐"></nz-switch>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">颜色</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <input type="color" [(ngModel)]="selectedComponent.yAxis.axisTick.lineStyle.color" (ngModelChange)="changeEChartType('y-axis-tick')">
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                      <div class="form-item">
                        <nz-form-item>
                          <nz-form-label nzSpan="8">类型</nz-form-label>
                          <nz-form-control nzSpan="16">
                            <nz-select [(ngModel)]="selectedComponent.yAxis.axisTick.lineStyle.type" (ngModelChange)="changeEChartType('y-axis-tick')">
                              <nz-option *ngFor="let item of selectedComponent.axisTypeList" [nzValue]="item" [nzLabel]="item"></nz-option>
                            </nz-select>
                          </nz-form-control>
                        </nz-form-item>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="title-type">
                  Y标签
                </div>
                <div class="form-item">
                  <nz-form-item>
                    <nz-form-label nzSpan="8">y轴标签</nz-form-label>
                    <nz-form-control nzSpan="16">
                      <nz-switch [(ngModel)]="selectedComponent.yAxis.axisLabel.show"
                                 (ngModelChange)="changeEChartType('y-axis-label')"
                                 nzCheckedChildren="显示X轴标签" nzUnCheckedChildren="隐藏X轴标签"></nz-switch>
                    </nz-form-control>
                  </nz-form-item>
                </div>
                <div *ngIf="selectedComponent.yAxis.axisLabel.show">
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">朝向</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.yAxis.axisLabel.inside"
                                   (ngModelChange)="changeEChartType('y-axis-label')"
                                   nzCheckedChildren="朝内" nzUnCheckedChildren="朝外"></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">间隔</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.axisLabel.interval"  (ngModelChange)="changeEChartType('y-axis-label')">
                          <nz-option [nzValue]="0" nzLabel="显示全部标签"></nz-option>
                          <nz-option nzValue="auto" nzLabel="auto"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">旋转</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.yAxis.axisLabel.rotate" (ngModelChange)="changeEChartType('y-axis-label')" [nzMin]="-90" [nzMax]="90"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">margin</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.yAxis.axisLabel.margin" (ngModelChange)="changeEChartType('y-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">颜色</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <input type="color" [(ngModel)]="selectedComponent.yAxis.axisLabel.color" (ngModelChange)="changeEChartType('y-axis-label')">
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体风格</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.axisLabel.fontStyle" (ngModelChange)="changeEChartType('y-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.fontStyleList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体粗细</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.yAxis.axisLabel.fontWeight" [nzMin]="100" [nzMax]="900" [nzStep]="100" (ngModelChange)="changeEChartType('y-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">字体大小</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-input-number [(ngModel)]="selectedComponent.yAxis.axisLabel.fontSize" [nzMin]="12" (ngModelChange)="changeEChartType('y-axis-label')"></nz-input-number>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">文字水平对齐</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.axisLabel.align" (ngModelChange)="changeEChartType('y-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.horizontalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">文字垂直对齐</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-select class="w100" [(ngModel)]="selectedComponent.yAxis.axisLabel.verticalAlign" (ngModelChange)="changeEChartType('y-axis-label')">
                          <nz-option *ngFor="let item of selectedComponent.verticalList" [nzLabel]="item" [nzValue]="item"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="form-item">
                    <nz-form-item>
                      <nz-form-label nzSpan="8">坐标分隔线</nz-form-label>
                      <nz-form-control nzSpan="16">
                        <nz-switch [(ngModel)]="selectedComponent.yAxis.splitLine.show" (ngModelChange)="changeEChartType('y-axis-split-line')"
                                   nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"
                        ></nz-switch>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </div>
            </div>
          </nz-collapse-panel>
          <nz-collapse-panel nzHeader="Series">
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">名称</nz-form-label>
                <nz-form-control nzSpan="16">
                  <input type="text" nz-input [(ngModel)]="selectedComponent.series.name" (ngModelChange)="changeEChartType('series')">
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">文本标签</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-switch [(ngModel)]="selectedComponent.series.label.show" (ngModelChange)="changeEChartType('series')"
                              nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"
                  ></nz-switch>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">文本位置</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-select class="w100" [(ngModel)]="selectedComponent.series.label.position" (ngModelChange)="changeEChartType('series')">
                    <nz-option *ngFor="let item of selectedComponent.seriesPosList" [nzLabel]="item" [nzValue]="item"></nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">旋转</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-input-number [(ngModel)]="selectedComponent.series.label.rotate" [nzMin]="-90" [nzMax]="90" (ngModelChange)="changeEChartType('series')"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">颜色</nz-form-label>
                <nz-form-control nzSpan="16">
                  <input type="color" [(ngModel)]="selectedComponent.series.label.color" (ngModelChange)="changeEChartType('series')" />
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="form-item">
              <nz-form-item>
                <nz-form-label nzSpan="8">字体大小</nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-input-number [(ngModel)]="selectedComponent.series.label.fontSize" [nzMin]="12" (ngModelChange)="changeEChartType('series')"></nz-input-number>
                </nz-form-control>
              </nz-form-item>
            </div>
          </nz-collapse-panel>
        </nz-collapse>
      </div>
    </div>
  </div>
  <textarea class="content-area"></textarea>
  <div class="spin" *ngIf="isLoading">
    <nz-spin nzSimple></nz-spin>
  </div>
</div>

<nz-modal
  [(nzVisible)]="visible"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  (nzOnCancel)="visible = false"
  nzWidth="1200px"
  nzMaskClosable="false"
>
  <ng-template #modalTitle>
    查看代码
  </ng-template>
  <ng-template #modalContent>
    <div class="tab-list">
      <div [ngClass]="['tab-item', item === activeTab ? 'active' : '']" *ngFor="let item of tabList" (click)="clickTab(item)">
        {{item}}
      </div>
      <div class="copy-code">
        <button nz-button nzType="primary" (click)="clickCopyCode('html')">复制HTML</button>
        <button *ngIf="modalType === 'top-search'" nz-button nzType="primary" (click)="clickCopyCode('css')">复制CSS</button>
        <button nz-button nzType="primary" (click)="clickCopyCode('ts')">复制TS</button>
        <button *ngIf="openSwaggerConfig" nz-button nzType="primary" (click)="clickCopyCode('service_ts')">复制SERVICE_TS</button>
      </div>
    </div>
    <div *ngIf="modalType === 'normal'" class="tab-content">
      <div *ngIf="activeTab === 'HTML'" class="code-area" [innerHTML]="codeTempMap.htmlTemp"></div>
      <div *ngIf="activeTab === 'TS'" class="code-area" [innerHTML]="codeTempMap.tsTemp"></div>
      <div *ngIf="activeTab === 'SERVICE_TS'" class="code-area" [innerHTML]="codeTempMap.serviceTsTemp"></div>
    </div>
    <div *ngIf="modalType === 'top-search'" class="tab-content">
      <div *ngIf="activeTab === 'HTML'" class="code-area" [innerHTML]="codeTempMap.topSearchHtml"></div>
      <div *ngIf="activeTab === 'CSS'" class="code-area" [innerHTML]="codeTempMap.topSearchCSS"></div>
      <div *ngIf="activeTab === 'TS'" class="code-area" [innerHTML]="codeTempMap.topSearchTs"></div>
    </div>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="visible = false">关闭</button>
  </ng-template>
</nz-modal>


<nz-modal
  [(nzVisible)]="configFieldVisible"
  [nzTitle]="modalTitleConfigField"
  [nzContent]="modalContentConfigField"
  [nzFooter]="modalFooterConfigField"
  (nzOnCancel)="configFieldVisible = false"
  nzWidth="1200px"
  nzMaskClosable="false"
>
  <ng-template #modalTitleConfigField>
    字段配置
  </ng-template>
  <ng-template #modalContentConfigField>
    <nz-table [nzData]="selectedComponent.columns" [nzShowPagination]="false">
      <thead>
        <tr>
          <th>序号</th>
          <th>title</th>
          <th>field</th>
          <th>排序</th>
          <th>显示过滤</th>
          <th>过滤类型</th>
          <th>输入过滤</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody cdkDropList (cdkDropListDropped)="dropField($event)">
        <tr *ngFor="let item of selectedComponent.columns; let i = index" cdkDrag>
          <td>{{i + 1}}</td>
          <td>
            <input type="text" nz-input [(ngModel)]="item.title" placeholder="请输入表头">
          </td>
          <td>
            <input type="text" nz-input [(ngModel)]="item.field" placeholder="请输入字段名">
          </td>
          <td>
            <nz-switch [(ngModel)]="item.isSort" nzCheckedChildren="开启排序" nzUnCheckedChildren="关闭排序"></nz-switch>
          </td>
          <td>
            <nz-switch [(ngModel)]="item.showFilter" nzCheckedChildren="开启过滤" nzUnCheckedChildren="关闭过滤" (ngModelChange)="changeFilter(item, $event, 'showFilter')"></nz-switch>
          </td>
          <td>
            <nz-switch *ngIf="item.showFilter" [(ngModel)]="item.filterMultiple" nzCheckedChildren="多选" nzUnCheckedChildren="单选"></nz-switch>
          </td>
          <td>
            <nz-switch [(ngModel)]="item.customFilter" nzCheckedChildren="开启输入框过滤" nzUnCheckedChildren="关闭输入框过滤" (ngModelChange)="changeFilter(item, $event, 'customFilter')"></nz-switch>
          </td>
          <td>
            <span class="delete-op" (click)="clickDeleteColumns(i)">删除</span>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <div class="add-row" (click)="clickAddColumns()">
      <i nz-icon nzType="plus"></i>
      添加
    </div>
  </ng-template>
  <ng-template #modalFooterConfigField>
    <button nz-button nzType="default" (click)="configFieldVisible = false">关闭</button>
  </ng-template>
</nz-modal>

<nz-modal
  [(nzVisible)]="crudVisible"
  [nzTitle]="modalTitleCrud"
  [nzContent]="modalContentCrud"
  [nzFooter]="modalFooterCrud"
  (nzOnCancel)="crudVisible = false"
  nzWidth="1000px"
  nzMaskClosable="false"
>
  <ng-template #modalTitleCrud>
    crud.ts文件内容
  </ng-template>
  <ng-template #modalContentCrud>
    <button nz-button nzType="primary" (click)="clickCopyCode('crud')">复制crud.ts代码</button>
    <div class="tab-content">
      <div class="code-area" [innerHTML]="crudCode"></div>
    </div>
  </ng-template>
  <ng-template #modalFooterCrud>
    <button nz-button nzType="default" (click)="crudVisible = false">关闭</button>
  </ng-template>
</nz-modal>

<nz-modal
  [(nzVisible)]="swaggerVisible"
  [nzTitle]="modalTitleSwagger"
  [nzContent]="modalContentSwagger"
  [nzFooter]="modalFooterSwagger"
  (nzOnCancel)="swaggerVisible = false"
  nzWidth="1000px"
  nzMaskClosable="false"
>
  <ng-template #modalTitleSwagger>
    swagger配置
  </ng-template>
  <ng-template #modalContentSwagger>
    <div class="form-item">
      <nz-form-item>
        <nz-form-label nzSpan="8">Swagger地址</nz-form-label>
        <nz-form-control nzSpan="16">
          <textarea nz-input rows="2" [(ngModel)]="swaggerUrl" placeholder="Swagger地址"></textarea>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="form-item">
      <nz-form-item>
        <nz-form-label nzSpan="8">匹配基础地址</nz-form-label>
        <nz-form-control nzSpan="16">
          <input type="text" nz-input placeholder="需要匹配的地址" [(ngModel)]="matchUrl" (ngModelChange)="generatorApiCode()">
          <button nz-button nzType="default" (click)="clickRequestSwagger()">
            点击请求
          </button>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="form-item">
      <nz-form-item>
        <nz-form-label nzSpan="8">Swagger配置</nz-form-label>
        <nz-form-control nzSpan="16">
          <nz-switch [nzDisabled]="!swaggerData.host" nzUnCheckedChildren="禁用" nzCheckedChildren="启用" [(ngModel)]="openSwaggerConfig"></nz-switch>
        </nz-form-control>
      </nz-form-item>
    </div>
  </ng-template>
  <ng-template #modalFooterSwagger>
    <button nz-button nzType="default" (click)="swaggerVisible = false">关闭</button>
  </ng-template>
</nz-modal>
